<template>
  <div class="records-page">
    <header class="records-header">
      <h1>游戏战绩记录</h1>
    </header>

    <div class="records-content">
      <div class="game-stats">
        <h2 class="section-title">我的游戏记录</h2>
        <el-table :data="gameRecords" style="width: 100%">
          <el-table-column prop="gameName" label="地图名称" width="180"></el-table-column>
          <el-table-column prop="score" label="得分" width="120"></el-table-column>
          <el-table-column prop="date" label="日期" width="160"></el-table-column>
          <el-table-column prop="duration" label="时长" width="120">
            <template v-slot="scope">
              {{ scope.row.duration }} 小时
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'GameRecords',
  data() {
    return {
      gameRecords: [
        { gameName: '亚海悬城', score: 1500, date: '2025-6-5', duration: 2 },
        { gameName: '源工重镇', score: 2000, date: '2025-6-3', duration: 3 },
        { gameName: '隐世修所', score: 1200, date: '2025-6-2', duration: 1.5 },
        { gameName: '霓虹町', score: 2500, date: '2025-6-1', duration: 4 },
        { gameName: '森寒冬港', score: 2500, date: '2025-6-1', duration: 4 },
        { gameName: '微风岛屿', score: 2500, date: '2025-6-2', duration: 4 },
        { gameName: '裂变峡谷', score: 2500, date: '2025-6-1', duration: 4 },
      ],
    };
  },
};
</script>

<style scoped>
.records-page {
  max-width: 800px;
  margin: auto;
  padding: 20px;
  background-color: #f9f9f9; 
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.records-header {
  margin-bottom: 20px;
}

.section-title {
  margin-bottom: 15px;
  font-size: 24px;
  font-weight: 600;
}

.game-stats {
  padding: 15px;
  background-color: #fff; 
  border-radius: 8px;
}
</style>